<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>5.vue中的数组</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{name}}</h1>
            <h1>{{age}}</h1>
            <h1>{{a.b.c.d}}</h1>
            <h1>{{arr}}</h1>
            <button @click="name = '李四'">修改姓名</button>
            <button @click="age = 20">修改年龄</button>
            <button @click="a.b.c.d = 321">更新d</button>
            <button @click="change">更新数组的第一个元素</button>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        let vm = new Vue({
            el:"#app",
            data:{
                name:'张三',
                age:18,
                a:{
                    b:{
                        c:{
                            d:100
                        }
                    }
                },
                arr:["抽烟","喝酒","打麻将"]
            },
            methods:{
                change(){
                   this.arr.splice(0,1,"学习")

                }
            }

        })

        
        
    </script>
</html>